<template>
	<view>
	<!-- <view style="margin-top: 50px; font-size: 16px; text-align: center;"> -->
			<!-- <text>首页</text> -->
		 <!-- </view> -->

		<view class="box">
			<!-- 搜索 -->
			<view class="search">
				<!-- <input type="text" placeholder="企业和活动搜索" placeholder-style="font-size:28rpx;color:#ACACAC;" />
				<icon type="search" size="16" /> -->
				<u-search
					v-model="searchkeyword"
					placeholder="企业和活动搜索"
					:clearabled="true"
					:action-style="{ color: '#4095E5' }"
					shape="square"
					bg-color="#EFEFEF"
					border-color="#BBBBBB"
					:show-action="false"
					height="80rpx"
				></u-search>
			</view>
			<!-- 轮播图 -->
			<swiper circular indicator-dots autoplay interval="2000" duration="1000" class="banner" indicator-active-color="#00DCB6">
				<swiper-item>
					<!-- <navigator url=""> -->
					<image src="/static/banner1.jpg" mode="widthFix"></image>
					<!-- </navigator> -->
				</swiper-item>
				<swiper-item>
					<!-- <navigator> -->
					<image src="/static/banner2.jpg" mode="widthFix"></image>
					<!-- </navigator> -->
				</swiper-item>
			</swiper>
			<!-- 图标跳转详情 -->
			<view class="tab">
				<navigator class="tabList" :url="item.ToPages" v-for="(item, index) in tabLists" :key="index">
					<view class="iconBox">
						<!-- <cover-image :src="item.iconPath" mode=""></cover-image> -->
						<uni-icons custom-prefix="iconfont" :type="item.iconType" size="26"></uni-icons>
					</view>
					<text>{{ item.text }}</text>
				</navigator>
			</view>
			<!-- 公告 -->
			<!-- <view class="notice">
				<text>通知公告</text>
				<div class="notice-content">巴拉巴拉巴拉</div>
			</view> -->
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<u-notice-bar :text="text4" direction="column" @click=""></u-notice-bar>
				</view>
			</view>

			<!-- 推荐企业和热门活动的头部一样 -->

			<!-- 推荐企业 -->
			<view class="introduce">
				<view class="hd">
					<text>推荐企业</text>
					<navigator open-type="reLaunch" url="/pages/company/company" class="text">更多&gt;</navigator>
				</view>
				<view class="bd suggest">
					<view @click="gocomDetail(item)" class="suggest-item" v-for="item in suggestList" :key="item.id">
						<view class="iconBox">
							<image :src="item.img" mode="widthFix"></image>
						</view>
						<text>{{ item.title }}</text>
					</view>
				</view>
			</view>
			<!-- 热门活动 -->
			<view class="introduce">
				<view class="hd">
					<text>热门活动</text>
					<navigator open-type="navigate" url="/subpkg/active/activeList" class="text">更多&gt;</navigator>
				</view>
				<view class="bd hot-act">
					<view class="hot-act-item" v-for="item in 2"  @click="gotoActDetail">
						<image src="/static/banner1.jpg" mode="widthFix"></image>
						<view>巴拉巴拉巴拉巴拉</view>
					</view>
				</view>
			</view>
		</view>
		<popup></popup>
		<tabbar :tab="0"></tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 搜索框
			searchkeyword: '',
			// 图标与文字
			tabLists: [
				{
					// iconPath: '/static/icon/合伙人.png',
					iconType: 'icon-geren',
					text: '找合伙人',
					ToPages: '/subpkg/partner/partnerList'
				},
				{
					iconType: 'icon-tuandui',
					text: '找团队',
					ToPages: '/subpkg/recruit/recruit'
				},
				{
					iconType: 'icon-dakaixinxi',
					text: '岗位招聘',
					ToPages: '/subpkg/recruit/recruit'
				},
				{
					iconType: 'icon-icon',
					text: '实习兼职',
					ToPages: '/subpkg/parttime/parttime'
				},
				{
					iconType: 'icon-ticket',
					text: '活动列表',
					ToPages: '/subpkg/active/activeList'
				},
				{
					iconType: 'icon-shijianjiaoxue',
					text: '在线资源',
					ToPages: '/subpkg/Course/Course'
				},
				{
					iconType: 'icon-qizi',
					text: '找项目',
					ToPages: '/subpkg/recruit/recruit'
				},
				{
					iconType: 'icon-jiaoyi',
					text: '闲置交易',
					ToPages: '/subpkg/trade/trade'
				}
			],
			text4: ['寒雨连江夜入吴', '平明送客楚山孤', '洛阳亲友如相问', '一片冰心在玉壶'],
			// 推荐企业的列表
			suggestList: [
				{
					id: 11,
					title: '1广东科贸',
					info: ['上市公司', '10000以上', '消费生活'],
					ing: '15',
					img: '/static/page1.jpg'
				},
				{
					id: 12,
					title: '2广东科贸',
					info: ['上市公司', '10000以上', '消费生活'],
					ing: '15',
					img: '/static/page1.jpg'
				},
				{
					id: 13,
					title: '3广东科贸',
					info: ['上市公司', '10000以上', '消费生活'],
					ing: '15',
					img: '/static/page1.jpg'
				}
			]
		};
	},
	onLoad() {},
	methods: {
		// 点击推荐企业列表，跳去详情页
		gocomDetail(item) {
			// 统一设置收藏为false
			item.collectState = false;
			uni.navigateTo({
				// url要传id参数
				// 加密url参数对象
				url: '/subpkg/company/companyDetail?item=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		// 热门活动详情
		gotoActDetail(){
			uni.navigateTo({
				url:'/subpkg/active/activeDetail'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
* {
	box-sizing: border-box;
}

.box {
	padding: 20rpx;
	height: 860px;
}

// 搜索
.search {
	// height: 68rpx;
	// display: flex;
	// align-items: center;
	margin: 20rpx;
	// border: 2px solid #dcdcdc;
	// border-radius: 12rpx;
}

.search input {
	width: 86%;
	padding-left: 24rpx;
}

.search icon {
	flex: 1;
	margin-left: 10rpx;
}

// 轮播图
.banner {
	width: 100%;
}

// 图标列表
.tab {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 40rpx 0;
	// 换行
	flex-wrap: wrap;
}

.tab .tabList {
	// 4个一行
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

// 选择前4个
.tab .tabList:nth-child(-n + 4) {
	margin-bottom: 40rpx;
}

.tab .iconBox {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	border-radius: 50%;
	border: 1px solid #bbbbbb;
	overflow: hidden;
	box-sizing: border-box;
}

.tab text {
	font-size: 24rpx;
	margin-top: 18rpx;
}

// 通知公告
.notice {
	display: flex;
	align-items: center;
	padding: 10rpx 40rpx;
	border: 1px solid #bbbbbb;
	border-radius: 16rpx;
}

// .notice image{
// 	width: 32rpx;
// 	height: 32rpx;
// 	vertical-align: middle;
// }
.notice text {
	padding-right: 40rpx;
	border-right: 1px solid #bbbbbb;
	font-size: 28rpx;
}

.notice .notice-content {
	margin-left: 40rpx;
}

// 推荐企业和热门活动的共同部分
.introduce {
	// margin-top: 40rpx;
	padding: 20rpx;
}

.introduce .hd {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.introduce .hd text:nth-child(1) {
	font-size: 36rpx;
	font-weight: 500;
}

.introduce .hd .text {
	font-size: 24rpx;
	color: #6c6c6c;
}

.introduce .bd {
	display: flex;
	margin: 30rpx 0;
}

// 推荐企业
.introduce .suggest {
	// justify-content: space-between;
}

.introduce .suggest-item {
	display: flex;
	flex: 1;
	margin-right: 20rpx;
	align-items: center;
	font-size: 24rpx;
	padding: 10rpx 20rpx;
	box-shadow: 1rpx 1rpx 12rpx #ccc;
}
.introduce .suggest-item:last-child {
	margin-right: 0;
}
.introduce .suggest-item .iconBox {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	border-radius: 50%;
	border: 1px solid #bbbbbb;
	margin-right: 12rpx;
	overflow: hidden;
}

.introduce .suggest-item image {
	width: 40rpx;
	height: 40rpx;
}

// 热门活动
.introduce .hot-act {
	font-size: 28rpx;
}
.introduce .hot-act-item {
	flex: 1;
	margin-right: 20rpx;
}
.introduce .hot-act-item:last-child {
	margin-right: 0;
}
.introduce .hot-act-item image {
	width: 100%;
	height: 200rpx;
	margin-bottom: 10rpx;
}

.u-demo-block {
	padding: 20rpx;
}
</style>
